<template>
  <!-- 头部标识栏 -->
  <div
    class="head"
    :style="{ backgroundColor: head_status == true ? 'white' : '' }"
  >
    <p class="name">万景千言</p>
    <p class="scenic_area">
      <span id="name">{{ science.name }}</span
      ><span class="cut" @click="jump('/switchover')">[切换]</span>
    </p>    
  </div>
  <!-- 轮播图 -->
  <div class="banner_box">
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="black">
        <van-swipe-item v-for="(item, index) in banner" :key="index">
          <img :src="item.img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
  <!-- 公告 -->
  <div class="notice">
    <van-notice-bar left-icon="volume-o" :text="notice" @click="showPopup" />
  </div>
  <!-- 内容导航栏 -->
  <div class="com_nav">
    <div class="com" @click="jump('/ticketing')">
      <div class="nav_img">
        <img src="../assets/home1.gif" alt="" />
      </div>
      <div class="nav_word">
        <p>票务专区</p>
      </div>
    </div>
    <div class="com">
      <div class="nav_img">
        <img src="../assets/home2.gif" alt="" />
      </div>
      <div class="nav_word">
        <p>景点讲解</p>
      </div>
    </div>
    <div class="com" @click="jump('/map')">
      <div class="nav_img">
        <img src="../assets/home3.gif" alt="" />
      </div>
      <div class="nav_word">
        <p>景区地图</p>
      </div>
    </div>
    <div class="com" @click="jump('/foreshow')">
      <div class="nav_img">
        <img src="../assets/home4.gif" alt="" />
      </div>
      <div class="nav_word">
        <p>演出预告</p>
      </div>
    </div>
  </div>
  <!-- 热门活动 -->
  <div class="hot_active">
    <div class="hot_head">
      <div class="hot_left">
        <van-icon name="fire" color="red" size="20px" />
        <h3>热门活动</h3>
      </div>
      <div class="hot_right">
        <van-button
          round
          icon="arrow"
          type="primary"
          icon-position="right"
          size="mini"
          >更多</van-button
        >
      </div>
    </div>
    <div class="hot_com" @click="jump('/active'), set()">
      <img :src="events.image" alt="" />
    </div>
  </div>
  <!-- 景点打卡推荐 -->
  <div class="hot_active">
    <div class="hot_head">
      <div class="hot_left">
        <van-icon name="smile" color="rgb(1,157,233)" size="20px" />
        <h3>景点打卡推荐</h3>
      </div>
      <div class="hot_right">
        <van-button
          round
          icon="arrow"
          type="primary"
          icon-position="right"
          size="mini"
          >更多</van-button
        >
      </div>
    </div>
    <div class="scenic_spot">
      <div
        class="scenic_com"
        v-for="(item, index) in scenic"
        :key="item.id"
        @click="jumpClock(item.id)"
      >
        <img :src="item.img" alt="" />
        <div class="scenic_word">
          <h4>{{ item.name }}</h4>
          <p>浏览量:{{ item.hot }}</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 空标签 -->
  <div class="kong"></div>

  <!-- 公告弹出 -->
  <div class="up_box">
    <div class="black"></div>
    <div class="up_com">
      <div class="up_name">演出</div>
      <div class="up_title">123</div>
      <div class="up_but">我知道了</div>
    </div>
  </div>
  <!-- 弹窗 -->
  <div class="hint_box">
    <p class="hint_word">123</p>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import axios from "axios";
import { ref } from "vue";
import { showDialog } from "vant";
import { jsxDEV } from "vue/jsx-runtime";

export default {
  setup() {
    sessionStorage.setItem("userId", 594);
    const router = useRouter();
    let banner = ref([]); //轮播图数组
    let notice = ref(""); //公告内容
    let events = ref({}); //热门活动
    let scenic = ref([]); //热门打卡
    let science = ref({}); //景区信息
    let head_status = ref(false);
    let sceniceId =
      sessionStorage.getItem("sceniceId") == "" ||
      sessionStorage.getItem("sceniceId") == undefined
        ? 2
        : sessionStorage.getItem("sceniceId");
    axios({
      url: "/api/science/index", // url
      params: {
        // 参数
        id: sceniceId,
      },
    })
      .then(function (res) {
        console.log(res); // 成功回调
        banner.value = res.data.banner;
        notice.value = res.data.notice.title;
        events.value = res.data.events;
        scenic.value = res.data.scenic;
        science.value = res.data.science;
        sessionStorage.setItem("scienceData", JSON.stringify(res.data.science));
      })
      .catch(function (err) {
        console.log(err); // 失败回调
      });
    function set() {
      //跳转事件
      sessionStorage.setItem("activeId", events.value.id);
    }
    function jump(site) {
      //跳转事件
      router.push({
        path: site,
      });
    }

    function jumpClock(id) {
      //跳转打卡页面事件
      router.push({
        path: "/clock",
        query: {
          id: id,
        },
      });
    }
    //获取滚动条
    function getScrollTop() {
      var scrollPos;
      if (window.pageYOffset) {
        scrollPos = window.pageYOffset;
      } else if (document.compatMode && document.compatMode != "BackCompat") {
        scrollPos = document.documentElement.scrollTop;
      } else if (document.body) {
        scrollPos = document.body.scrollTop;
      }
      return scrollPos;
    }
    //监听滚动条
    window.onscroll = function () {
      let scrollPos = getScrollTop();
      if (scrollPos >= 50) {
        head_status.value = true;
      } else {
        head_status.value = false;
      }
    };

    const showPopup = () => {
      showDialog({
        title: "公告",
        message: notice,
        messageAlign: "left",
        confirmButtonText: "我已阅读",
        confirmButtonColor: "#f29100",
      }).then(() => {
        // on close
      });
    };
    return {
      banner,
      notice,
      events,
      scenic,
      jump,
      head_status,
      science,
      showPopup,
      set,
      jumpClock,
    };
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 200px;
  text-align: center;
  background-color: #39a9ed;
}

.my-swipe {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}

.van-swipe-item img {
  width: 100%;
}

.head {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  z-index: 99;
}

.name {
  position: absolute;
  left: 10px;
}

.scenic_area {
  font-weight: bold;
}

.banner_box {
  width: 100%;
  height: auto;
  background-image: url("../assets/beijing.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.banner {
  width: 90%;
  height: 300px;
  margin: 0 5%;
  padding-top: 100px;
}

.com_nav {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

.com {
  width: 20%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.nav_img {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}

.nav_img img {
  width: 80%;
  max-width: 80px;
  max-height: 80px;
  border-radius: 100%;
  box-shadow: 1px 1px 1px #c6c6c6;
}

.nav_word {
  width: 100%;
  height: auto;
  text-align: center;
}

.nav_word p {
  margin-top: 5px;
  font-size: 14px;
}

.hot_active {
  width: 100%;
  height: auto;
}

.hot_head {
  width: 100%;
  height: auto;
  padding: 10px 0;
  background-image: url("../assets/bar.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: flex;
  justify-content: space-between;
}

.hot_left {
  display: flex;
  align-items: center;
  margin-left: 5px;
}

.hot_left h3 {
  font-size: 16px;
  font-weight: 700;
  margin-left: 5px;
}

.hot_right {
  margin-right: 10px;
}

.hot_com {
  width: 95%;
  height: auto;
  margin: 10px 2.5%;
}

.hot_com img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 1px 1px 1px #c6c6c6;
}

.scenic_spot {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.scenic_com {
  width: 45%;
  margin: 10px 2.5%;
}

.scenic_com img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.scenic_word {
  display: flex;
  justify-content: space-between;
}

.scenic_word p {
  font-size: 12px;
}

.up_box {
  width: 100%;
  height: 100vh;
  position: absolute;
  bottom: 0;
  display: none;
  z-index: 99;
}

.black {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.up_com {
  width: 300px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 10px;
}

.up_name {
  width: 100%;
  line-height: 2.5;
  font-size: 18px;
  text-align: center;
  border-bottom: 1px solid #e3e3e3;
  font-weight: bold;
}

.up_title {
  width: 100%;
  padding: 20px;
}

.up_but {
  width: 100%;
  line-height: 2.5;
  font-size: 18px;
  text-align: center;
  border-top: 1px solid #e3e3e3;
  font-weight: bold;
  color: rgb(242, 145, 0);
}

.hint_box {
  width: 60%;
  height: auto;
  background-color: rgba(47, 47, 47, 0.6);
  border-radius: 10px;
  margin: 0px 20%;
  position: fixed;
  top: 50%;
  display: none;
}

.hint_word {
  font-size: 16px;
  line-height: 2;
  color: white;
  text-align: center;
}

.kong {
  width: 100%;
  height: 80px;
}
</style>
